// ignore_for_file: deprecated_member_use

/**
 *  我的预付卡
 */

import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/base/base_page.dart';
import 'package:cbec_app/components/base/base_nav_bar.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/pages/my/controller/prepayment_card_ctr.dart';
import 'package:cbec_app/routes/routes.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:left_scroll_actions/left_scroll_actions.dart';

class PrepaymentCard extends GetView<PrePaymentCardController> {
  const PrepaymentCard({super.key});

  final TextStyle _titleStyle = const TextStyle(fontSize: 13, color: Color.fromRGBO(51, 51, 51, 1), fontWeight: FontWeight.w300);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<PrePaymentCardController>(builder: (controller) {
      return BasePage(
        title: "我的预付卡",
        iconType: IconType.back,
        navType: NavType.custom,
        customWidget: _top(),
        children: [
          if (controller.cardList.isEmpty) ...[
            const PrepaymentCardNullItem()
          ] else ...[
            Container(
                margin: EdgeInsets.only(top: 10.w),
                height: 500.h,
                child: Tools.getPullRefresh(
                    refreshController: controller.baseRefreshCtr,
                    enablePullDown: true,
                    enablePullUp: controller.hasNextPage,
                    onLoading: controller.onPageLoading,
                    onRefresh: controller.onPageRefresh,
                    child: ListView.builder(
                        itemCount: controller.cardList.length,
                        itemBuilder: (context, index) {
                          final Map item = controller.cardList[index];
                          return PrepaymentCardItem(amount: item['balance'].toString(), cardNo: item['cardNum'], id: int.parse(item['id']));
                        })))
          ]
        ],
      );
    });
  }

  // 自定义头部
  Widget _top() => Container(
        padding: EdgeInsets.only(left: 12.w, right: 12.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            BaseInteractive(
              onClick: () {
                Get.back();
              },
              childWidget: const Icon(Icons.arrow_back_ios, size: 25),
            ),
            Text("我的预付卡", style: setTextStyle(16, FontWeight.w300, Colors.black)),
            InkWell(
              child: Text(
                "添加新卡",
                style: _titleStyle,
              ),
              onTap: () {
                Get.toNamed(Routes.addPrepaymentCard);
              },
            )
          ],
        ),
      );

  // 按钮
  Widget _Save() => Container(
        width: double.infinity,
        color: Colors.white,
        margin: EdgeInsets.only(top: 20.w),
        padding: EdgeInsets.fromLTRB(18.w, 18.w, 18.w, 18.w),
        child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(const Color.fromRGBO(248, 63, 45, 1)),
            ),
            onPressed: () => {Tools.showToast("暂无UI")},
            //自带的按钮有阴影，先暂时用到
            child: const Text(
              "什么是预付卡",
              style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: Colors.white),
            )),
      );
}

class PrepaymentCardNullItem extends StatelessWidget {
  const PrepaymentCardNullItem({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 134.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.w),
        gradient: const LinearGradient(
          colors: [Color.fromRGBO(253, 160, 75, 1), Color.fromRGBO(245, 92, 26, 1)],
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            height: 104.h,
            child: const Center(
              child: Text(
                '请先绑定预付卡',
                style: TextStyle(color: Colors.white, fontSize: 13, fontWeight: FontWeight.w400),
              ),
            ),
          ),
          Container(
            color: Colors.white,
            height: 0.2.h,
          )
        ],
      ),
    );
  }
}

//预付卡组件
class PrepaymentCardItem extends StatelessWidget {
  final String amount; //金额
  final String cardNo; //卡号
  final int id;

  PrepaymentCardItem({super.key, required this.amount, required this.cardNo, required this.id});
  final TextStyle titleStyle = const TextStyle(fontSize: 13, color: Colors.white, fontWeight: FontWeight.w500);
  final TextStyle amountStyle = const TextStyle(fontSize: 22, color: Colors.white, fontWeight: FontWeight.w500);
  final TextStyle textStyle = const TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.w300);

  final PrePaymentCardController controller = Get.put(PrePaymentCardController());

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 10.w, left: 10.w, right: 10.w),
      child: LeftScroll(
        buttons: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 0.2.w),
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.w), color: const Color.fromRGBO(248, 63, 45, 1)),
            child: LeftScrollItem(
              text: '删除',
              onTap: () {
                controller.delete(id);
              },
            ),
          )
        ],
        child: Container(
          height: 134.h,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.w),
            gradient: const LinearGradient(
              colors: [Color.fromRGBO(253, 160, 75, 1), Color.fromRGBO(245, 92, 26, 1)],
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              //上
              Container(
                margin: EdgeInsets.only(left: 27.w),
                height: 104.h,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text("预付卡", style: titleStyle),
                    SizedBox(
                      height: 5.h,
                    ),
                    Text("￥$amount", style: amountStyle)
                  ],
                ),
              ),
              //下
              Container(
                  height: 30.h,
                  decoration: const BoxDecoration(
                    border: Border(
                      top: BorderSide(color: Colors.white, width: 0),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        margin: EdgeInsets.only(left: 10.w),
                        child: Text(
                          "NO.$cardNo",
                          style: textStyle,
                        ),
                      ),
                    ],
                  )),
            ],
          ),
        ),
      ),
    );
  }
}
